<html lang="zh">
<head>
    <link href="visualPages.css" rel="stylesheet">
    <title> Data Structure Visualization </title>
    <meta charset="UTF-8">
    <meta charset="UTF-8">
    <link href="favicon.ico" rel="shortcut icon"/>
</head>
<body>

<div class="container">
    <div class="header"><h1>Data Structure Visualizations</h1></div>
    <div class="menu">
        <ul>
            <li><a href="about.html">About</a></li>
            <li><a href="Algorithms.html">Algorithms</a></li>
            <li><a href="faq.html"> F.A.Q </a></li>
            <li><a href="bugfeature.html"> Known Bugs /<br> &nbsp; &nbsp; Feature Requests </a></li>
            <li><a href="java/visualization.html"> Java Version </a></li>
            <li><a href="flash.html">Flash Version </a></li>
            <li><a href="source.html">Create Your Own /<br> &nbsp; &nbsp; Source Code</a></li>
            <li><a href="contact.html"> Contact </a></li>
        </ul>

        <br> <br>
        <div class="about">
            <a href="http://www.cs.usfca.edu/galles"> David Galles </a> <br>
            <a href="http://www.cs.usfca.edu"> Computer Science </a> <br>
            <a href="http://www.usfca.edu"> University of San Francisco </a>
        </div>

    </div>

    <div class="content">

        <h1>Visualizing Algorithms</h1>

        The best way to understand complex data structures is to see them in action. We've developed interactive
        animations for a
        variety of data structures and algorithms. Our visualization tool is written in javascript using the HTML5
        canvas element,
        and run in just about any modern browser -- including iOS devices like the iPhone and iPad, and even the web
        browser in
        the Kindle! (The frame rate is low enough in the Kindle that the visualizations aren't terribly useful, but the
        tree-based
        visualizations -- BSTs and AVL Trees -- seem to work well enough)

        <br> <br>
        Check the <a href="Algorithms.html">Algorithms</a> menu for all of the latest javascript implementations.

        <h1> How to Use the Visualizations </h1>

        This visualizations are meant to be fairly self- explainitory, though there are some subleties for advanced
        usage. Take a look at a
        typical visualization, for Binary Search Trees:

        <br> <br>

        <img alt="BST Screenshot" src="Screenshot.png">
        <br>

        <h2> Algorithm Specific Controls </h2>
        At the top of the screen (boxed in red in the above screenshot) are the algorithm specific controls -- these
        will change depending upon
        what algorithm you are visualizing. In this example, you could insert, delete, or find an element in the BST by
        entering text in the
        appropriate field and either pressing return or clicking the relevant button. The tree can be printed by
        clicking the print button.
        Once you give a command, the visualiztion will start, and can be controlled by the general animation controls at
        the bottom of the screen.

        <h2> General Animation Controls </h2>

        <ul>
            <li><em> Skip Back</em> If you are in the middle of an animation, this button will completly undo the
                current command. If you are
                not in the middle of an animation, this button will undo the previous command
            </li>
            <li><em> Step Back</em> This button is only active if you have paused the current animation (using the
                play/pause button). Step back
                one step in the current animation. If you are not currently animating, step back into the previous
                command. You could use this button
                (with sufficient keypresses) to back up through the entire history of everything you've done
            </li>
            <li><em> Play/Pause</em> Toggle between play mode (in which the algorithm runs free until it completes) and
                paused mode (where you need to
                press the Step Forward or Step Back button to advance the animation)
            </li>
            <li><em> Step Forward </em> This button is only active if you have paused the current animation (using the
                play/pause button), and the current
                animation has not yet completed. Step
                forward one step in the current animation.
            </li>
            <li><em>Skip Forward </em> This button is only active if the current animation has not completed. Skip to
                the end of the current animation
            </li>
            <li><em>Animation Speed (slider)</em> Change the speed of the animation. The value of this slider is saved
                in a cookie, so you should
                only need to set it once if you have a preferred speed
            </li>
            <li><em>w, h, Chnage Canvas Size</em> Change the width / height of the display area. While the change is
                immediate, the animations will
                not be centered in this new field until you reload the page. This will clear out the currnet animation,
                but the width and hight values
                are also saved in a cookie, so you should only need to change this field once, and then everything
                should work well if you are on
                a smart phone or a desktop with loads of screen real estate.
            </li>
            <li><em>Move Controls</em> Toggle between the general controls being at the top or bottom of the webpage
            </li>

            <br>

            Note that it can be easy to confuse yourself by stepping forward an backwards through an animation -- you
            can confuse the <em>next</em>
            step in the animation with the <em>previous</em> step, and misunderstand how the algorithm works. You may
            wish to only step
            forward when you are first delving into a particular algorithm.

        </ul>


        <h1>Java/Swing Version</h1>
        This work is based on visualizations that we created in Java using Swing -- that code is still available <a
            href="java/visualization.html">here</a>,
        though that code is no longer being maintained. There are a few algorithms that we have not yet ported to the
        new system,
        so the older version may still be of use.

        <h1>Flash Version</h1>
        We have also developed a <a href="flash.html">flash</a> version of the visualizations, which contains a subset
        of
        the algoritms developed in javascript. The Flash version is not as well supported as the main javascript
        version,
        but we will keep the flash version available for those who may get a better frameate out of flash than
        javascript.
        However, the javascript versions are the preferred ones, and will get updates and bug fixes the quickest.

        <h1>Writing your Own</h1>
        <a href="source.html">The tutorial for creating your own visualizations is now online!</a>
        All source code is available there as well. If you want to create your own visualizations, but are having
        trouble
        getting things to work, please let me know. Everything is licensed under FreeBSD, and you
        can use it for whatever you like. Please let me know if you using the code -- I'm curious to see what
        it does in the wild.

    </div>
    <div class="footer">Copyright 2011 <a href="http://www.cs.usfca.edu/galles">David Galles </a></div>

</div>

</body>
</html>
